<template>
  <div>

	<myheader></myheader>

	<br /><br />

			<!--面包屑导航-->
			<Breadcrumb :datas="datas" ></Breadcrumb>

	

	<section class="featured-block text-center">
		<div class="container">


			<Avatar :src="src" :width='150' fit="fill" ></Avatar>

			<!-- 视频地址 -->
			<video id="video" v-show="videosrc" width="300" height="200" :src="videosrc" controls="controls" autoplay="autoplay" muted>
			
			</video>

			<br>
			<Button color="red" @click="changepic">{{mybutton}}</Button>
			<table>
					<tr >
						<td style="padding:5px;">
							
							密码:

						</td>
						<td style="padding:5px;">
							
							<input type="password" v-model="password" />

						</td>
					</tr>

					<tr>
						<td style="padding:5px;">
							
							确认密码:

						</td>
						<td style="padding:5px;">
							
							<input type="password" v-model="password1" />

						</td>
					</tr>

					<tr>
						<td style="padding:5px;">
							
							头像上传:

						</td>
						<td style="padding:5px;">
							
							<input type="file" @change="upload" />

						</td>
					</tr>

					<tr>
						<td style="padding:5px;">
							
							七牛云上传:

						</td>
						<td style="padding:5px;">
							
							<input type="file" @change="upload_qiniu" />

						</td>
					</tr>

					<tr>
						<td style="padding:5px;">
							
							进度展示:

						</td>
						<td style="padding:5px;">
							
							{{ loadpercent }}

							<Progress v-show="loadpercent_int" :percent="loadpercent_int" color="blue"><span slot="title"></span><span slot="text">{{ loadpercent_int }}%</span></Progress>

						</td>
					</tr>

					<tr>
						<td style="padding:5px;">
							

						</td>
						<td style="padding:5px;">
							
							<Button @click="submit">提交</Button> &nbsp;&nbsp;

						</td>
					</tr>

			</table>
			
			<br><br>
			<div>
				
				<!-- 关注商品列表 -->
				<Checkbox :datas="goods" v-model="good_value"></Checkbox>

				<br><br>
				<Button @click="flow" color="green">批量操作</Button>

			</div>

		</div>
	</section>
	

	
	
	
	<footer class="footer">

		<div class="container">
			@v3u.cn
		</div>
		
		
	</footer>
    
  </div>
  
</template>


 
<script>

//导包
import myheader from './myheader.vue';
import dragVerify from 'vue-drag-verify';
import {config,formatXml} from '../config.js';

export default {
  data () {
    return {
      msg: "这是一个变量",
      //声明面包屑变量
      datas:[{title:'首页',route:{name:'index'}},{title:'我的首页'}],
      password:'',
      password1:'',
	  src:'',
	  //   七牛上传凭证
	  uptoken:"",
	//   视频地址
	  videosrc:"",
	//   进度
	loadpercent:'',
	//整型
	loadpercent_int:0,
	//   切换按钮变量
	mybutton:'进入画中画',
	// 商品关注列表
	goods:[],
	good_value:[],
	myid:{},
    }
  },
  //注册组件标签
  components:{
  		'myheader':myheader
  },
  mounted:function(){

	// 获取商品列表
	this.get_goods();

	//   获取uptoken
	this.get_uptoken();
   
	//发送请求
			this.axios.get('http://localhost:8000/userinfo/',{params:{uid:localStorage.getItem('uid')}}).
			then((result) =>{

							console.log(result);

							//赋值操纵
							this.videosrc = 'http://q79iv9k3k.bkt.clouddn.com/' + result.data.img;

			});

},


  methods:{

	//   批量操作
	flow:function(){

		console.log(this.good_value);

		var goods = [];

		for(let i=0, l=this.good_value.length;i<l;i++){

			goods.push(this.myid[this.good_value[i]]);

		};

		var glist = JSON.stringify(goods);
		console.log(glist)

		 //发送请求
  		this.axios.get('http://localhost:8000/getflow/',{params:{ids:glist,type:2,uid:localStorage.getItem('uid')}}).then((result) =>{

						console.log(result);
						  
						this.$Message(result.data.message);
						  
  		});
		

	},

	// 获取关注商品
	get_goods:function(){
		  //发送请求
  		this.axios.get('http://localhost:8000/uidflow/',{params:{uid:localStorage.getItem('uid')}}).then((result) =>{

						  console.log(result);

						  var goods = [];

						  for(let i=0, l=result.data.length;i<l;i++){

							  goods.push(result.data[i].name);
							  this.myid[result.data[i].name] = result.data[i].id

						  };

							// 赋值
						  this.goods = goods;
						  this.good_value = goods;

						  console.log(goods);

  		});
	},

	// 定义画中画切换
	changepic:function(){
		// 判断是否属于画中画界面
		if(video !== document.pictureInPictureElement){

			// 尝试进入画中画
			video.requestPictureInPicture();
			this.mybutton = "退出画中画";

		}else{

			// 退出画中画
			document.exitPictureInPicture();
			this.mybutton = "进入画中画";

		}
	},

  	//提交
  	submit:function(){

		  //发送请求
  		this.axios.get('http://localhost:8000/uploaduser/',{params:{password1:this.password1,password:this.password,uid:localStorage.getItem('uid')}}).then((result) =>{

						  console.log(result);
						  if(result.data.code==200){
							  this.$Message(result.data.message)
						  }else{
							  this.$Message(result.data.message)
						  }
  		});

	  },
	
	// 获取七牛凭证
	get_uptoken(){

		//发送请求
  		this.axios.get('http://localhost:8000/uptoken/').then((result) =>{

  						console.log(result);

  						//赋值操纵
  						this.uptoken = result.data.token;

  		});
	},

	//   上传七牛云
	upload_qiniu:function(e){
		// console.log()

		//获取文件对象
		let file = e.target.files[0];
		
		//声明参数
  		let param = new FormData();

		// 将上传凭证添加参数
		param.append('token',this.uptoken);

		// 附加文件
		param.append('file',file);

		// 定制化axios请求
		const axios_qiniu = this.axios.create({withCredentials:false});

		// 发送请求
		axios_qiniu({

			method:'POST',
			url:'http://up-z1.qiniu.com/',
			data:param,
			timeout:30000,
			//设置上传进度
  			onUploadProgress:(e) => {

  				//设置总进度对象  已上传字节数 / 总字节数
  				var complete = (e.loaded / e.total);

  				//安慰剂按钮
  				if(complete < 1){
  					this.loadpercent = (complete * 100).toFixed(2) + "%";

  					this.loadpercent_int = parseInt((complete * 100).toFixed(2));
  				}

  			}

		}).then(result =>{

			console.log(result);
			// 赋值 图片
			this.src = 'http://q79iv9k3k.bkt.clouddn.com/'+result.data.key;

			// 视频
			this.videosrc = 'http://q79iv9k3k.bkt.clouddn.com/'+result.data.key;
			
			
			  
			//发送请求
			this.axios.get('http://localhost:8000/updateuser/',{params:{uid:localStorage.getItem('uid'),img:result.data.key}}).then((result) =>{

							console.log(result);

							
			});
			//上传成功后，强行100%
  			this.loadpercent = '100%';
			this.loadpercent_int = 100;
		});
	},

  	//提交
  	upload:function(e){

  		//获取文件对象
  		let file = e.target.files[0];

  		//声明参数
  		let param = new FormData();

  		//添加文件
  		param.append('file',file,file.name);

  		//声明请求头
  		let config = {headers:{'Content-Type':'multipart/form-data'}};

  		//发送请求
  		this.axios.get('http://localhost:8000/uploadfile/',param,config).then((result) =>{

  						console.log(result);

  						//赋值操纵
  						this.src = 'http://localhost:8000/static/upload/' + result.data.filename;

  		});

  	}

     
  }
}


</script>
 
<style>



</style>